/* 主界面样式 */

.client-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  width: 1000px;
  height: 740px;
  background-color: rgb(245, 245, 245);
  border-radius: 5px;

  display: flex;

  /* 设置z轴坐标。让main页面显示在上面 */
  z-index: 2;
}

.main .left {
  width: 280px;
  height: 100%;
  background-color: rgb(46, 50, 56);

  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.main .right {
  width: 720px;
  height: 100%;

  padding: 0 20px;
}

.cover {
  width: 100%;
  height: 100%;

  background-image: url(../pic/park.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  /* 为了让.cover和,main能重叠。加上定位属性 */
  position: absolute;
  top: 0;
  left: 0;
  /* 设置了z轴坐标 */
  z-index: 1;

  /* 使用CSS朦胧效果 */
  filter: blur(5px);
}

.main .left .user {
  height: 80px;
  font-size: 20px;
  line-height: 80px;
  color: white;
  padding: 0 20px;
}

.main .left .search {
  height: 40px;
  padding: 0 20px;
  /* 使用弹性布局，让里面的元素水平排列 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.main .left .search input {
  height: 34px;
  width: 200px;
  line-height: 34px;
  font-size: 14px;
  color: white;
  background-color: rgb(38, 41, 46);

  /* 去除边框和轮廓线 */
  border: none;
  outline: none;
  padding-left: 10px;

  border-radius: 5px;
}

.main .left .search button {
  height: 34px;
  width: 34px;
  border: none;
  outline: none;

  background-color: rgb(38, 41, 46);
  border-radius: 5px;
  background-image: url(../pic/搜索图标.png);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: center center;
}

.main .left .search button:active {
  background-color: #9aff71;
}

.main .left .tab {
  height: 50px;
  display: flex;
  align-items: center;
}

.main .left .tab .tab-session {
  height: 100%;
  width: 50%;

  background-image: url(../pic/对话.png);
  background-repeat: no-repeat;
  background-size: 32px 32px;
  background-position: center center;
}

.main .left .tab .tab-friend {
  height: 100%;
  width: 50%;

  background-image: url(../pic/好友2.png);
  background-repeat: no-repeat;
  background-size: 32px 32px;
  background-position: center center;
}

.main .left .list {
  height: 570px;

  /* 如果内容太多。提供一个滚动条 */
  overflow: auto;
}
.main .left .list .selected {
  background-color: rgb(46, 54, 65);
}
.main .left .list li {
  height: 60px;
  padding: 10px 20px;
  color: white;
  border-top: 1px solid black;
}

/* 给会话列表使用 */
.main .left .list li h3,
.main .left .list li p {
  height: 20px;
  font-size: 14px;
  line-height: 20px;
}

.main .left .list li h4 {
  height: 40px;
  line-height: 40px;
  font-style: 20px;
}

.hide {
  display: none;
}

/* 所有滚动条都不见了 全局生效*/
::-webkit-scrollbar {
  display: none;
}


.main .right .empty{
  background-image: url(../pic/消息背景.png);
}

.main .right .title {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  border-bottom: 1px solid #ccc;
}

.main .right .message-show {
  height: 500px;

  border-bottom: 1px solid #ccc;

  overflow: auto;
}
.main .right .message-show .message {
  /* 上边距 */
  margin-top: 10px;

  display: flex;
}

/* 靠左 */
.main .right .message-show .message-left {
  justify-content: flex-start;
}
/* 靠右 */
.main .right .message-show .message-right {
  justify-content: flex-end;
}

.main .right .message-show .message .box {
  width: 500px;
}

.main .right .message-show .message .box h4 {
  /* 去掉加粗效果 */
  font-weight: normal;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
}

.main .right .message-show .message .box p {
  padding: 20px;
  border-radius: 10px;
}

/*  给左侧右侧消息设置背景颜色*/
.main .right .message-show .message-left .box p {
  background-color: #fff;
}

.main .right .message-show .message-right .box p {
  background-color: #7ff36a;
}

.main .right .message-input {
  /* 先把 textarea转换成块级元素，方便设计尺寸 */
  display: block;
  width: 100%;
  height: 135px;
  border: none;
  outline: none;

  margin-top: 2px;
  background-color: rgb(245, 245, 245);
  padding: 10px;
  resize: none;

  font-size: 20px;
}

.main .right .ctrl {
  height: 40px;
  display: flex;
  justify-content: flex-end;
}

.main .right .ctrl button {
  height: 40px;
  width: 100px;
  background-color: rgb(233,233,233);
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #27c90a;
  font-size: 16px;
  margin-right: 10px;
}
.main .right .ctrl button:active{
  background-color: rgb(210,210,210);
}